<template>
	<div>
		<el-upload ref="upload" action="" :limit="props.limit" :on-exceed="handleExceed" :auto-upload="false">
			<template #trigger>
				<el-button :size="props.size">点击上传</el-button>
			</template>
		</el-upload>
	</div>
</template>

<script setup lang="ts" name="Upload">
import { ref } from "vue";
import type { UploadInstance, UploadProps, UploadRawFile } from "element-plus";
import { genFileId } from "element-plus";
export interface IUploadProps {
	size?: "" | "default" | "small" | "large"; // 按钮大小 => 非必传，默认为small
	limit?: number; //最大上传数 => 非必传（默认为 1)
}

const props = withDefaults(defineProps<IUploadProps>(), {
	limit: 1,
	size: "small"
});

// 超出限制后的回调
const upload = ref<UploadInstance>();
const handleExceed: UploadProps["onExceed"] = files => {
	upload.value!.clearFiles();
	const file = files[0] as UploadRawFile;
	console.log(file);
	file.uid = genFileId();
	upload.value!.handleStart(file);
};
</script>

<style scoped></style>
